<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
html {
	font-family:Arial;
	font-size:10pt;
}
</style>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./ibsheet/ibsheetinfo.js"></script>
<script src="./ibsheet/ibsheet.js"></script>
<script>
	var myPivot = null;
	var mySheet = null;
	var sTime, eTime, result;
	
	$(document).ready(function() {
		
		createIBSheet2(document.getElementById("pivotArea"),"myPivot","100%","300px");
		
		//sheet 초기화
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","300px");
		
		var initData = {};
		initData.Cfg = {SearchMode:smLazyLoad, Page:50, MergeSheet:msHeaderOnly};
		initData.Cols = [
			{Header:"시(0)",Type:"Text", SaveName:"si", Width:80, Align:"Center",Edit:0},
			{Header:"동(1)",Type:"Text", SaveName:"dong", Width:80, Align:"Center",Edit:0},
			{Header:"날짜(2)",Type:"Date", SaveName:"dt", Width:80, Align:"Center",Format:"Ymd"},
			{Header:"종류(3)",Type:"Text", SaveName:"use", Width:80, Align:"Center"},
			{Header:"구조(4)",Type:"Text", SaveName:"strct", Width:80, Align:"Center"},
			{Header:"지붕(5)",Type:"Text", SaveName:"roof", Width:80, Align:"Center"},
			{Header:"층(6)",Type:"Text", SaveName:"floor", Width:80, Align:"Center"},
			{Header:"면적(7)",Type:"Text", SaveName:"area", Width:80, Align:"Center"},
			{Header:"호(8)",Type:"Int", SaveName:"ho", Width:80, Align:"Right"},
			{Header:"면접 합계(9)",Type:"Float", SaveName:"floorAreaSum", Width:80, Align:"Right"},
			{Header:"(10)",Type:"Int", SaveName:"cnt", Width:80, Align:"Right"}
		];
		initData.HeaderMode  = {ColMove:1};
		IBS_InitSheet(mySheet,initData);
		
		mySheet.SetDataAutoTrim(0);
		
// 		mySheet.WheelScrollSize = 1;

		mySheet.FitColWidth();
		
		doAction("search");
		
// 		alert(mySheet.Version());
	});
	
	function createPivotTable() {
		$("#rTime").text("");
		sTime = new Date();
		
		var rows		= $('#rows').val();
		var cols		= $('#cols').val();
		var value		= $('#value').val();
		var valueType	= $("#valueType option:selected").val();
		
		var info = {Rows:rows, Cols:cols, Value:value, ValueType:valueType};
		
		myPivot.Reset();
		myPivot.CreatePivotTable(info, mySheet);
		myPivot.FitColWidth();
	}
	
	function myPivot_OnSearchEnd(Code, Msg, StCode, StMsg) {
		
		eTime = new Date();
		result = (eTime - sTime) / 1000;
		
		$("#rTime").text("걸린 시간 : " + result + "초");
		
	}
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("SearchStats.json");
				break;
		}
	}
</script>
<title>대교 CNS 샘플 예제</title>
</head>
<body>
<div id="main">
	<div id="title">대교 CNS 샘플 예제</div>
	<br> 
	<div id="functionArea">
		<span>
			행(Rows) : <input type="text" size="4" id="rows" value="1|3">,
			열(Cols) : <input type="text" size="4" id="cols" value="4|5">,
			값(Value) : <input type="text" size="4" id="value" value="5">,
			타입(ValueType) :
			<select id="valueType">
				<option value="Sum" >합계</option>
				<option value="Count" selected>갯수</option>
			</select> 
			<input type="button" value="초기화" onclick="doAction('search')">
			<input type="button" value="피벗 적용" onclick="createPivotTable()">
			<span id="rTime"></span>
		</span>
	</div>
	<br>
	▼ 조회된 시트 
	<div id="viewArea">
	</div>
	<br>
	▼ 피벗 적용된 시트
	<div id="pivotArea">
	</div>
</div>
</body>
</html>